<style>
	#div_frm_coordinates{
		margin: 0 0 5px 0;
		list-style: none;
		display: table;
	}
	
	#div_frm_coordinates li{
		float: left;
		padding: 3px 0;
		margin: 0 0 0 5px;
	}
	
	#div_get_coordinates{
		border: 1px solid red;
		position: relative;
		width: 740px;
		height: 430px;
		display: table;
	}
	
	#div_point{
		position: absolute;
		border: 1px solid blue;
	}
</style>
<script>
	function showCoords(c){
      	$('#coor_left1').val(c.x);
      	$('#coor_top1').val(c.y);
      	$('#coor_left2').val(c.x2);
      	$('#coor_top2').val(c.y2);
    };

    function clearCoords(){
    	$('#coor_left1').val('');
      	$('#coor_top1').val('');
      	$('#coor_left2').val('');
      	$('#coor_top2').val('');
    };

	function saveCoord(){
		$.ajax({
	  		type: "POST",
	       	url: '/admin/admin-coordination-image/save-coordination',
	       	data: {
		       	type		: 'add',
		       	coord_id	: $("#coord_id").val(),
    	       	image_id	: $("#image_id").val(),
    	       	coor_name	: $("#coor_name").val(),
    	       	coor_order	: $("#coor_order").val(),
    	       	x1			: $("#coor_left1").val(),
    	       	y1			: $("#coor_top1").val(),
    	       	x2			: $("#coor_left2").val(),
    	       	y2			: $("#coor_top2").val()
    	    },
	        success: function (data){
	        	$("#popup").bPopup().close();
	        	listCoordinate($("#image_id").val());
	        }
		});
	};
	var type = 'add';
	$(document).ready( function(){
		if(type == 'add'){
			$('#target').Jcrop({
				onChange:   showCoords,
		        onSelect:   showCoords,
		        onRelease:  clearCoords,
		        bgOpacity: 0.5,
		        bgColor: 'black'
			});
		}else{
			var x1 = $("#coor_left1").val();
			var y1 = $("#coor_top1").val();
			var x2 = $("#coor_left2").val();
			var y2 = $("#coor_top2").val();
			$('#target').Jcrop({
				onChange:   showCoords,
		        onSelect:   showCoords,
		        onRelease:  clearCoords,
		        bgOpacity: 0.5,
		        bgColor: 'black',
		        setSelect: [x1, y1, x2, y2]
			});
		}
	});
</script>
<form name="addCoords" id="addCoords" method="post" action="" enctype="multipart/form-data">
	<input type="hidden" id="image_id" name="image_id" value="10" />
	<input type="hidden" id="coord_id" name="coord_id" value="" />
	<ul id="div_frm_coordinates">
		<li>
			<label>Coordinate name:</label>
			<input type="text" name="coor_name" id="coor_name" value="" />
		</li>
				<li>
			<label>X1:</label>
			<input type="text" name="coor_left1" id="coor_left1" value="" style="width: 25px;" readonly="readonly" />
		</li>
		<li>
			<label>Y1:</label>
			<input type="text" name="coor_top1" id="coor_top1" value="" style="width: 25px;" readonly="readonly" />
		</li>
		<li>
			<label>X2:</label>
			<input type="text" name="coor_left2" id="coor_left2" value="" style="width: 25px;" readonly="readonly" />
		</li>
		<li>
			<label>Y2:</label>
			<input type="text" name="coor_top2" id="coor_top2" value="" style="width: 25px;" readonly="readonly" />
		</li>
		<li>
			<input type="button" name="coor_save" id="coor_save" value="Save" onClick="javascript: saveCoord();" />
			<input type="reset" name="coor_reset" id="coor_reset" value="Reset" />
		</li>
	</ul>
	<div id="div_get_coordinates">
		<img id="target" src="http://s3.amazonaws.com/sportylivedata/coordination/images/img740x430/coorImg_135077546779770.jpg" width="740" height="430" />
	</div>
</form>

<div class="div-table">
                <table width="100%" border="0" class="adminlist">
                <thead>
                	 <tr>
	<th width="30"><input type="checkbox" onclick="checkedAll('appForm', 'cid[]')" name="checkall-toggle"></th>
	<th><a style="color: #165582" href="/maxx99/admin/admin-user/filter/type/sort/col/u.email/order/DESC">Email</a></th>
	<th width="300"><a style="color: #165582" href="/maxx99/admin/admin-user/filter/type/sort/col/u.first_name/order/DESC">Name</a></th>
	<th width="70"><a style="color: #165582" href="/maxx99/admin/admin-user/filter/type/sort/col/u.status/order/DESC">Status</a></th>
	<th width="150"><a style="color: #165582" href="/maxx99/admin/admin-user/filter/type/sort/col/u.created/order/DESC">Register date</a></th>
	<th width="150"><a style="color: #165582" href="/maxx99/admin/admin-user/filter/type/sort/col/group_name/order/DESC">Group default</a></th>
	<th width="70">Control</th>
	<th width="44"><a style="color: #165582" href="/maxx99/admin/admin-user/filter/type/sort/col/u.id/order/ASC">ID</a> <img src="/maxx99/public/templates/admin/white/images/small-icons/arrow_down.png"></th>
</tr>                 </thead>
                 <tbody>
                 <tr class="odd">
	<td class="center"><input type="checkbox" value="1" id="cid" name="cid[]"></td>
	<td class="left bold">admin@gmail.com</td>
	<td class="center">Nguy?n Anh Khoa</td>
	<td class="center"><a href="/maxx99/admin/admin-user/status/id/1/s/active">
        			<img title="Status" src="/maxx99/public/templates/admin/white/images/small-icons/active.png"> 
     				</a></td>
	<td class="center">2012-09-22 02:17:11</td>
	<td class="center">Founder</td>
	<td class="center"><a href="/maxx99/admin/admin-user/info/id/1">
        			<img title="View Info" src="/maxx99/public/templates/admin/white/images/small-icons/icon-info.png"> 
     				</a> <a href="/maxx99/admin/admin-user/edit/id/1">
        			<img title="Edit item" src="/maxx99/public/templates/admin/white/images/small-icons/icon-edit.png"> 
     				</a> <a href="javascript:submitQuestion('appForm','/maxx99/admin/admin-user/delete/id/1','Are you sure you want to delete this item?')">
        			<img title="Delete item" src="/maxx99/public/templates/admin/white/images/small-icons/icon-delete.png"> 
     				</a></td>
	<td class="center">1</td>
</tr>                  </tbody>
                  <tfoot>
                      <tr>
                        <td colspan="15">
                        	<div id="paning">
  	<div class="paning-left">
		<div class="star-off">&nbsp;</div><div class="previous-off">&nbsp;</div><div class="paning-line">&nbsp;</div><div class="paning-text">Page</div>
		              <div class="paning-input"><input type="text" class="width-25 center" value="1" id="page" name="page"></div>
		              <div class="paning-text">of 1</div><div class="paning-line">&nbsp;</div><div class="next-off">&nbsp;</div><div class="end-off">&nbsp;</div>	   	<div class="clr"></div>
	</div>
    <div class="paning-right">Displaying 1 -  1 of 1</div>
    <div class="clr"></div>
</div>
                        </td>
                      </tr>
                  </tfoot>
                </table>

                </div>